<template>
  <el-dialog ref="diaRef" v-model="visible" title="楼盘选择" width="900px">
    <div class="mb-20px">
      <el-input v-model="initParams.name" v-debounce="search" class="w-200px" placeholder="请输入楼盘名字"></el-input>
    </div>
    <div class="flex flex-row flex-wrap">
      <el-card
        v-for="(p, index) in list"
        :key="index"
        class="mr-10px mt-10px"
        :body-style="{ padding: '10px', cursor: 'pointer' }"
        shadow="hover"
        @click="chooseLou(p)"
      >
        {{ p.name }}
      </el-card>
    </div>
    <div class="flex flex-row justify-end mt-20px px-10px box-border">
      <el-pagination
        layout="prev,pager,next,total"
        @current-change="changePage"
        :total="total"
        background
        :page-size="initParams.pageSize"
      ></el-pagination>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { onBeforeMount, ref, reactive } from "vue";
import { listNameByAccount } from "@/api/modules/region";

const emits = defineEmits(["chooseLou"]);

const initParams = reactive({ pageSize: 30, pageNum: 1, name: "" });

const list = ref();
const total = ref(0);

const getList = async () => {
  const { data } = await listNameByAccount(initParams);
  list.value = (data as any).list;
  total.value = (data as any).total;
};

const search = () => {
  if (/[\u4e00-\u9fa5]/.test(initParams.name)) {
    initParams.pageNum = 1;
    initParams.pageSize = 30;
    getList();
  }
};

const changePage = (val: number) => {
  initParams.pageNum = val;
  getList();
};

const chooseLou = (row: any) => {
  emits("chooseLou", row);
  visible.value = false;
};

const visible = ref(false);

const acceptParams = () => {
  visible.value = true;
};

defineExpose({ acceptParams });

onBeforeMount(() => {
  console.log(1111);
  Promise.all([getList()]);
});
</script>

<style></style>
